<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01入门</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            border: 1px solid #030;
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
<svg  class="box">
    <!--  绘制直线    -->
    <line x1="100" y1="100" x2="200" y2="200" stroke="cyan"> </line>
    <!--  绘制折线   -->
    <polyline points="150,100 200,50 300,100" stroke="red" fill="none"></polyline>
    <!--  绘制矩形   -->
    <rect x="250" y="250" width="100" height="100" stroke="green" fill="none"></rect>
    <!--  绘制圆形   -->
    <circle cx="400" cy="400" r="50" stroke="blue" fill="none"></circle>
    <!--  绘制椭圆   -->
    <ellipse cx="500" cy="500" rx="50" ry="30" stroke="yellow" fill="none"></ellipse>
    <!--  绘制多边形   -->
    <polygon points="600,300 650,350 700,300 700,400 600,400" stroke="pink" fill="none"></polygon>
    <!--  绘制路径   -->
<!--   M 开始  L中间   Z 结束     -->
    <path d="M 100 100 L 200 200 L 300 100 Z" stroke="orange" fill="none"></path>
</svg>
</body>
</html>
